<template>
  <div
    class="product-list_item p-[8px]"
    v-for="(item, index) in getRows(props.list, expand)"
    :key="index"
  >
    <div class="flex w-full">
      <VImage :src="item.attr_img" :width="52" :height="52"></VImage>
      <div class="" style="margin-left: 4px; width: 280px">
        <div class="flex items-center justify-between w-full">
          <div class="pr-10">
            <VText title="SKU" :value="item.goods_sku" copy></VText>
          </div>
          <div class="whitespace-nowrap">
            <div>
              <span>￥</span>
              <span>{{ item.purchase_price }}</span>
            </div>
          </div>
        </div>
        <VText title="自定义" :value="item.custom_sku" copy></VText>
        <VText :value="item.sku_cn_title"></VText>
      </div>
    </div>
    <div class="product-list_number">x{{ item.purchase_quantity }}</div>
  </div>
  <div
    v-if="props.list.length > 2"
    class="product-list_item bg-[var(--base-table-header-bg-color)] text-[var(--el-color-primary)] text-center text-xs p-[4px] cursor-pointer"
    @click="handleExpand"
  >
    更多({{ props.list.length }})
  </div>
</template>

<script setup>
import VImage from "@/components/Image/index.vue";

const props = defineProps({
  list: {
    type: [Array, String],
    default: [],
  },
  handleExpand: {
    type: Function,
    default: () => {},
  },
});

const getRows = (items, expand) => {
  if (expand) return items;
  if (!items?.length) return [];
  if (items.length > 0 && items.length < 2) {
    return items;
  }
  if (!expand) {
    return items?.slice(0, 2);
  }
};

const handleExpand = () => {};
</script>
<style scoped>
.product-list {
  position: relative;
}

.product-list_item {
  width: 380px;
  box-sizing: border-box;
  border: 1px solid var(--base-border-color);
  position: relative;
}

.product-list_item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.product-list_item:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.product-list_number {
  font-size: 12px;
  position: absolute;
  right: 0;
  top: 0;
  color: #3366f1;
  width: 22px;
  height: 18px;
  line-height: 18px;
  background: var(--base-table-header-bg-color);
  text-align: center;
  border-radius: 0px 4px 0px 4px;
}
</style>
